<!--热门视屏-->
<template>
  <div class="video-item w">
    <div class="recommendTitle">
      <div class="title-left">
        <div class="titleinfo">热门视屏</div>
      </div>
      <div class="title-middle">
        <ul class="middleBox">
          <li v-for="(item) in liList" :key="item.id" v-on:click="addClass(item.id)"
            v-bind:class="{ On: item.id === current }" class="BoxItem">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="title-right">
        <div class="more">
          <router-link :to="{ name: 'videoSelect' }">点击更多</router-link>
        </div>
      </div>
    </div>
    <div class="videoRecommendList">
      <ul class="recommendBox clearfix" v-if="judgeNotFound">
        <li class="course-item" v-for="(childItem, index) in videoHotList" :key="index"
          @click="gotoVideoPage(childItem.videoId)" v-show="(index < 4)">
          <div class="course-img">
            <img :src="[publicUrl + childItem.image]" alt="视屏图片">
          </div>
          <div class="course-connect">
            <div class="connect-info">{{ childItem.name }}</div>
            <div class="course-bottom">
              <span>{{ childItem.nickname }}</span>
              <span>{{ childItem.time }}</span>
            </div>
          </div>
        </li>
      </ul>
      <div v-else class="notFound">
        <img src="../../assets/Img/defaultListImg.png" alt="">
        <span>没有相关数据</span>
      </div>
    </div>
  </div>
</template>
<script>
import { createPublicUrl } from '../../utils/index'
import { getHotVideo } from '../../service/systemService'
export default {
  name: 'videoModule',
  data() {
    return {
      liList: [
        {
          id: 1,
          name: '英语'
        },
        {
          id: 2,
          name: '数学'
        },
        {
          id: 3,
          name: '政治'
        },
        {
          id: 4,
          name: '计算机网络'
        },
        {
          id: 5,
          name: '数据结构'
        },
        {
          id: 6,
          name: '计算机组成原理'
        },
      ],
      videoHotList: [],
      current: 1,
      showflag: true
    };
  },
  mounted() {
    //默认加载页面时发送请求1
    this.getHotList(1)
  },
  methods: {
    getHotList(videoSpeciesId) {
      getHotVideo(videoSpeciesId).then((res) => {
        if (res.data.code === 200) {
          this.videoHotList = res.data.data
        } else if (res.data.code === 417) {
          this.showflag = false
        }
      })
    },
    addClass(videoSpeciesId) {
      this.current = videoSpeciesId
      //根据选择的种类来进行对应的请求
      this.getHotList(videoSpeciesId)
    },
    gotoVideoPage(videoId) {
      let location = {
        name: 'videoPage'
      }
      location.query = { videoId: videoId }
      this.$router.push(location)
    }
  },
  computed: {
    //计算出公共的路径
    publicUrl() {
      return createPublicUrl()
    },
    judgeNotFound() {
      return this.showflag
    }
  }
};
</script>
<style lang='less' scoped>
.video-item {
  .recommendTitle {
    display: flex;
    .title-left {
      flex: 1;

    }

    .title-middle {
      flex: 8;

      .middleBox {
        margin-left: 30px;

        .BoxItem {
          float: left;
          display: block;
          padding: 0 15px;
          border-bottom: 4px solid #ffffff;
          line-height: 27px;
          font-size: 16px;
          cursor: pointer;
          color: #333;
        }

        .On {
          color: #4e71f2;
          border-color: #4e71f2;
        }
      }
    }

    .title-right {
      flex: 1;

      .more {
        float: right;
        font-size: 14px;
        cursor: pointer;
        color: #333;
      }
    }
  }

  .videoRecommendList {
    margin-top: 20px;
    .recommendBox {
      width: 100%;
      .course-item:hover {
        margin-top: 0;
        box-shadow: 0 0 10px 2px #918f8f;
        transition: all 0.8s;
      }
    }
    .notFound {
      margin: 0 auto;
      width: 320px;
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    .hiddenListBox {
      display: block;
    }
  }
}
</style>
